<template>
    <div>
        <div>
            <el-breadcrumb separator="/" style="margin: 8px;">
                <el-breadcrumb-item>AB测试</el-breadcrumb-item>
                <el-breadcrumb-item>实验管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <h3>实验管理</h3>
            <div style="margin-top: 20px;">
                <el-form :inline="true" ref="query" :model="query">
                    <el-form-item label="实验名称" label-width="80px">
                        <el-input v-model="query.name" clearable class="common-width"
                            placeholder="请输入实验名称"></el-input>
                    </el-form-item>
                    <el-form-item label="实验状态" label-width="80px">
                        <el-select v-model="query.type" placeholder="请选择" class="common-width">
                            <el-option label="待处理" value="1"/>
                            <el-option label="处理中" value="2"/>
                            <el-option label="已完成" value="3"/>
                        </el-select>
                    </el-form-item>
                   
                    <el-form-item class="leftmargin">
                        <el-button type="primary" @click="getData">确定</el-button>
                        <el-button type="info" @click="handleClean" plain>重置</el-button>
                    </el-form-item>
                    <el-row>
                        <el-button type="primary" @click="addTest">新增实验</el-button>
                    </el-row>
                </el-form>
            </div>
            <el-table :data="tableData" class="table" align="center" stripe ref="table">
                <el-table-column prop="uid" align="center" width="80" label="ID"></el-table-column>
                <el-table-column prop="version" align="center" label="实验名称"></el-table-column>
                <el-table-column prop="createTime" align="center" label="实验模型"></el-table-column>
                <el-table-column prop="group" align="center" label="实验周期"></el-table-column>
                <el-table-column prop="ecology" align="center" label="实验状态"></el-table-column>
                <el-table-column prop="healthyPoint" align="center" label="实验描述"></el-table-column>
                <el-table-column prop="ecology" align="center" label="创建时间"></el-table-column>
                <el-table-column label="操作" align="center" width="160px">
                    <template slot-scope="scope">
                        <el-button type="text" class="blue" v-if="scope.row.type == 0" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="text" class="blue" v-else @click="handleEdit(scope.$index, scope.row)">报告详情</el-button>
                        <el-button type="text" class="blue" @click="handleEdit(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
                    :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
            </div>
        </div>
        <el-dialog title="请选择一种模版" :visible.sync="chooseVisible" width="35%">
            <el-row>
                <table class="choose-table" cellspacing="0">
                    <tr>
                        <p style="padding-left: 30px;">训练数据信息对模型隐私泄漏预警的影响21</p>
                    </tr>
                    <tr>
                        <p style="padding-left: 30px;">训练数据信息对模型隐私泄漏预警的影响11</p>
                    </tr>
                    <tr>
                        <p style="padding-left: 30px;">训练数据信息对模型隐私泄漏预警的影响31</p>
                    </tr>
                </table>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="chooseVisible = false">取 消</el-button>
                <el-button type="primary" @click="chooseSub">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { fetchData } from '../../api/index';
export default {
    data() {
        return {
            query: {
                deviceNo: '',
                pageNum: 1,
                pageSize: 10
            },
            chooseVisible:false,
            tableData: [],
            pageTotal: 0,

        };
    },
    created() {
        this.getData();
    },

    methods: {
        chooseSub(){},
        getData() {
            // this.$http.fetchGet('api/warnMessage/list').then(res => {
            //     console.log(res);
            //     this.pageTotal = 1;
            // })
            this.tableData = [{
                "id":357,
                "uid": 1,
                "version": "2.3.0",
                "createTime": "2024-05-01 12:02:03",
                "ecology": "tensolve-floow",
                "healthyPoint": "9.8分 高",
                "securityRisk":"",
                "impactScope":"",
                "versionMaintenance":"",
                "communityEngagement":"",
                "group":"group",
                "type":"",
                "name":"",
                "info":"",

            }];
            this.pageTotal = 1;
        },
        // 触发重置按钮
        handleClean() {
            this.query = {
                createTime: '',
                version: '',
                ecology: '',
                pageNum:1,
                pageSize:10,
            }
            this.getData();
        },
        addTest(){
            this.$router.push({ path: '/abTestAdd'});
        },
        // 编辑操作
        handleEdit(index, row) {
            this.$router.push({ path: '/abTestDetail', query: { id: row.id } });
        },

        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageNum', val);
            this.getData();
        },
    }
};
</script>

<style scoped>
.common-width {
    width: 350px;
}

.common-select {
    width: 350px;
}

.common-input {
    width: 350px;
}

.small-input {
    width: 225px;
}
.choose-table{
    width: 100%;
    font-size: 14px;
    border-collapse: collapse;
}
.choose-table tr{
    height: 50px;
    line-height: 50px;
    box-sizing: border-box !important;
    border: 0.5px solid rgb(198, 198, 198);
    padding-left: 20px;
}
.choose-table tr :hover{
    box-sizing: border-box !important;
    border: 0.5px solid rgb(108, 190, 252) !important;
}
.table {
    width: 100%;
    font-size: 14px;
    margin-top: 15px;
}

.green {
    color: #67c23a;
}

.blue {
    color: #2468F2;
}

.origin {
    color: #ff7300;
}

.red {
    color: #f56c6c;
}

.leftmargin {
    margin-left: 10px;
}

.mr10 {
    margin-right: 10px;
}

.form>>>.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
    margin-bottom: 10px;
}
</style>
